{% extends 'base/base.html' %}
{% load static %}
{% block head %}
    <link rel="stylesheet" href="{% static 'css/book.css' %}">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
{% endblock %}
{% block main %}
    <el-row :gutter="20">
        <el-col :span="4">
            <div class="grid-content bg-purple">&nbsp;</div>
        </el-col>
        <el-col :span="16">
            <div class="book-detail-wrap">
                <div class="book-information cf">
                    <div class="book-img">
                        <a id="bookImg" :data-id="book.uuid">
                            <img :src="book.novel_img">
                        </a>
                    </div>
                    <div class="book-info">
                        <h1><em v-text="book.novel_name"></em><a class="writer default" href="javascript:;"><span v-text="book.novel_author"></span> 著</a></h1>
                        <p class="tag-box">
											<span class="tag">
												<i class="blue" v-text="!book.novel_state?'连载中':'完结'">连载中</i>
												<i v-text="book.categories"></i>
											</span>
                        </p>
                        <p class="total"><span v-text="book.novel_words"></span><em>字</em></p>
                        <p class="intro" v-text="book.novel_description"></p>
                        <p class="btn">
                            <a class="pink-btn" href="javascript:;" id="readBtn" :data-chapter_id="c.uuid" v-for="(c,i) in book.chapter" v-if="i==0">免费试读</a>
                            <a class="border-btn" id="addBookBtn" href="javascript:" :data-bookid="book.uuid">加入书架</a>
                        </p>
                    </div>
                    <div class="take-wrap">
                        <a class="blue qr-btn" href="javascript:"><em class="fa fa-mobile fa-lg"></em>手机阅读
                            <div class="drop-down">
                                <cite><i></i></cite>
                                <img src="//qidian.gtimg.com/readnovel/images/book_details/app_qr_code.d5161.png">
                                <h3>扫码打开移动端</h3>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="content-nav-wrap cf">
                    <div class="nav-wrap fl">
                        <ul>
                            <li class="act"><a class="lang" href="javascript:">目录<i>(<span v-text="book.len"></span>章)</i></a></li>
                        </ul>
                    </div>
                    <div class="update">
                        <p><a class="blue" href="javascript:;" :data-chapter_id="c.uuid" v-for="(c,i) in book.chapter" v-if="i==(book.len-1)">更新至 <span
                                v-text="c.title"></span></a><!--<i>·</i><span>22天前</span>--></p>
                    </div>
                </div>
                <div class="catalog-content-wrap catalog-page">
                    <div class="go-top-box">
                        <a href="javascript:" title="回到顶部"><em class="fa fa-sort-asc fa-lg"></em></a>
                    </div>
                    <div class="volume-wrap">
                        <div class="volume">
                            <div class="cover"></div>

                            <h3>
                                年少花开<i>·</i>共<i v-text="book.len"></i>章<span class="free">免费</span><em class="count">本卷共<cite v-text="book.novel_words"></cite>字</em>
                            </h3>
                            <ul class="cf">
                                <li v-for="c in book.chapter">
                                    <a href="javascript:;" :title="c.title" v-text="c.title" :data-chapter_id="c.uuid"></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple">&nbsp;</div>
        </el-col>
    </el-row>
{% endblock %}

{% block script %}

    <script type="text/javascript">
        var book_id = "{{ book_id }}";
        var Main = {
            data() {
                return {
                    title: '',
                    keywords: '',
                    description: '',
                    search: {
                        key: ''
                    },
                    navList: [],
                    column_display: [],
                    book: {},
                };
            },
            methods: {
                handleNavSelect: function (key, keyPath) {
                    handleNavSelect(key, keyPath)
                },
                handSearch: function () {
                    var key = this.search.key;
                    console.log(key)
                },
                handleClick: function () {

                }
            }, mounted() {
                result = ajax(this, 'GET', {'parse': 'all'}, '{% url "web_api:navigation" %}');
                if (result.code === 0) {
                    this.navList = result.nav_all;
                    this.column_display = result.column_display;
                }
                result = ajax(this, 'GET', {'book_id': book_id}, '{% url "web_api:book" %}');
                if (result.code === 0) {
                    this.book = result.bookData;
                    this.title = result.bookData.novel_name + '-' + result.bookData.novel_key;
                    this.keywords = result.bookData.novel_key;
                    this.description = result.bookData.novel_description;
                }
            }
        };
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app')
    </script>
{% endblock %}